<template>
    <div>
        <el-tooltip effect="dark" content="请点击上传" placement="top-start">
            <div style="width: 300px">
                <el-button style="margin:10px 0 " type="primary" :loading="loading_right" @click="addRemoteFile">
                    {{ loading_right ? '正在等待设备回传结果...' : '采集特征(右手)' }}
                </el-button>
            </div>
        </el-tooltip>
        <div class="image-wrap">
            <div class="image-wrap">
                <el-table :data="rightImageList" border fit highlight-current-row>
                    <el-table-column align="center" label="掌静脉图片(点击查看)" width="300">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handlePictureCardPreview(scope.row)">{{ scope.row.filename
                            }}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" class-name="status-col" label="状态" prop="sTime">
                        <template slot-scope="scope">{{ loadCompletedObj[scope.row.loadCompleted] }}</template>
                    </el-table-column>
                    <el-table-column align="center" class-name="status-col" label="操作" width="120">
                        <template slot-scope="{ row, $index }">
                            <el-button slot="reference" size="mini" class="light_red_btn" @click="handleRemove(row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-dialog :visible.sync="dialogVisible" :destroy-on-close="true">
                    <div class="jp2-img2">
                        <img :src="detailsItem" data-display-polyfill-info="true" />
                    </div>
                </el-dialog>
            </div>

        </div>
    </div>
</template>
  
<script>
import { delPersonFaceApi, getEventIdentity, handleRemoteAdd, queryPersonIdByName } from "@/api/community/person";

export default {
    name: "leftHand",
    props: {
        personName: {
            type: String,
            default: () => ""
        }
    },
    data: function () {
        return {
            // canStop:[],
            intervalData: null,
            personIdData: "",
            rightImageList: [],
            loading_right: false,
            loadCompletedObj: {
                '-1': `已发送到设备，设备回复:失败`,
                '0': '已发送到设备，设备回复:等待',
                '1': '已发送到设备，设备回复:成功',
                '2': '已发送到设备，设备回复:正在删除'
            },
            dialogVisible: false,
            dialogImageUrl: "",
            detailsItem: {},
        }
    },
    methods: {


        handleRemove(file) {
            console.log(file.identityID);
            let params = {
                // idList: [file.palmarVeinId],
                identityID: file.identityID,
            };
            delPersonFaceApi(params).then((res) => {
                if (res) {
                    this.$message.success("删除成功");
                    this.getRight();
                }
            });
        },


        addRemoteFile() {
            let params = {
                name: this.$props.personName,
                effectiveStartTime: JSON.parse(window.localStorage.getItem("time-array")).effectiveStartTime,
                validEndTime: JSON.parse(window.localStorage.getItem("time-array")).validEndTime,
                type: 1,
            }
            // params = JSON.parse(window.localStorage.getItem("time-array"))
            // console.log('params1', params)
            //右手
            this.loading_right = true
            handleRemoteAdd(params).then(r => {
                console.log(r);
                this.loading_right = false
                this.$message.success("右手操作成功，等待设备回传结果");
                this.setIntervalMethod()
            }).catch(e => {
                console.log(e);
                this.loading_right = false
                this.$message.error("操作失败，请重试");
            })
            console.log('右手')

        },

        // 打开弹框
        handlePictureCardPreview(uploadFile) {
            console.log('uploadFile', uploadFile.url)
            this.dialogImageUrl = uploadFile.url;
            this.dialogVisible = true;
            // jp2
            this.$forceUpdate();
            this.detailsItem = process.env.VUE_APP_BASE_URL + uploadFile.url;
            console.log("this.detailsItem-plainvein", this.detailsItem);
            this.$nextTick(() => {
                this.asyncJp2();
            });
        },

        asyncJp2() {
            const s = document.createElement("script");
            s.type = "text/JavaScript";
            s.setAttribute("data-callType", "callScript");
            s.src = `${process.env.VUE_APP_BASE_URL}/html/jp2-polyfill.js`;
            // s.src = `http://192.168.30.65:92/html/jp2-polyfill.js`;
            // s.src = "/src/utils/html/jp2-polyfill.js";
            // console.log('s.src',s.src);
            document.head.appendChild(s);
        },

        setIntervalMethod() {
            let params = { name: this.personName }
            const interval = setInterval(() => {
                queryPersonIdByName(params).then(res => {
                    // console.log("daf", res)
                    if (res.length) {
                        this.personIdData = res
                        clearInterval(interval)
                        //拿到 person-id 查表格
                        this.setIntervalApi()
                    }
                }).catch(e => {
                    console.log(e);
                })
            }, 2000)
        },


        setIntervalApi() {
            this.intervalData = setInterval(() => {
                this.getRight()
            }, 2000);
        },

        getRight() {
            this.rightImageList = [];
            let query_r = {
                personId: this.personIdData[0].personId,
                type: "plamVeinRight",
            };
            getEventIdentity(query_r).then((res) => {
                let list = res;

                list.forEach((item) => {
                    item.url = item.identityData;
                    item.name = item.filename;
                });
                list.map((item) => {
                    this.rightImageList.push(item);

                });
                this.rightImageList.map((v, i) => {
                    console.log('v', v)
                    if (v.loadCompleted != 0) {
                        clearInterval(this.intervalData)
                    }
                })
                // if (this.rightImageList.length !== 0) {
                //   clearInterval(this.intervalData)
                // }
            });
        },



    }
}
</script>
  
<style scoped></style>
  